<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>书籍清单</title>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
	<script src="../static/tm.pagination.js"></script>
<script type="text/javascript">
	/*<![CDATA[*/
	var app = angular.module('app', []);
	app.controller('MainController', function($rootScope, $scope, $http) {

		$scope.data = {};
		$scope.rows = [];

		//添加
		$scope.add = function() {
			$scope.data = {
				no : 'No.1234567890',
				quantity : 100,
				'date' : '2016-12-30'
			};
		}

		//编辑
		$scope.edit = function(id) {
			for ( var i in $scope.rows) {
				var row = $scope.rows[i];
				if (id == row.id) {
					$scope.data = row;
					return;
				}
			}
		}

		//移除
		$scope.remove = function(id) {
			for ( var i in $scope.rows) {
				var row = $scope.rows[i];
				if (id == row.id) {
					$scope.rows.splice(i, 1);
					return;
				}
			}
		}

		//保存
		$scope.save = function() {
			$http({
				url : '/save',
				method : 'POST',
				data : $scope.data
			}).success(function(r) {
				//保存成功后更新数据
				$scope.get(r.id);
			});
		}

		//删除
		$scope.del = function(id) {
			$http({
				url : '/delete?id=' + id,
				method : 'POST',
			}).success(function(r) {
				//删除成功后移除数据
				$scope.remove(r.id);
			});
		}

		//获取数据
		$scope.get = function(id) {
			$http({
				url : '/get?id=' + id,
				method : 'POST',
			}).success(function(data) {
				for ( var i in $scope.rows) {
					var row = $scope.rows[i];
					if (data.id == row.id) {
						row.no = data.no;
						row.date = data.date;
						row.quantity = data.quantity;
						return;
					}
				}
				$scope.rows.push(data);
			});
		}

		//初始化载入数据
		$http({
			url : '/findAll',
			method : 'GET'
		}).success(function(rows) {
			for ( var i in rows) {
				var row = rows[i];
				$scope.rows.push(row);
			}
		});
	});
	/*]]>*/
</script>
</head>
<body ng-app="app" ng-controller="MainController">
	<h1>书籍清单</h1>
	<h4>
		<a href="http://www.cnblogs.com/GoodHelper/">from 刘冬的博客</a>
	</h4>
	<input type="button" value="添加" ng-click="add()" />
	<input type="button" value="保存" ng-click="save()" />
	<br />
	<br />
	<h3>清单信息：</h3>
	<input id="id" type="hidden" ng-model="data.id" />
	<table cellspacing="1" style="background-color: #a0c6e5">
		<tr>
			<td>编号：</td>
			<td><input id="no" ng-model="data.no" /></td>
			<td>日期：</td>
			<td><input id="date" ng-model="data.date" /></td>
			<td>数量：</td>
			<td><input id="quantity" ng-model="data.quantity" /></td>
		</tr>
	</table>

	<br />
	<h3>清单列表：</h3>
	<table cellspacing="1" style="background-color: #a0c6e5">
		<tr
			style="text-align: center; COLOR: #0076C8; BACKGROUND-COLOR: #F4FAFF; font-weight: bold">
			<td>操作</td>
			<td>编号</td>
			<td>日期</td>
			<td>数量</td>
		</tr>
		<tr ng-repeat="row in rows" bgcolor='#F4FAFF'>
			<td><input ng-click="edit(row.id)" value="编辑" type="button" /><input
				ng-click="del(row.id)" value="删除" type="button" /></td>
			<td>{{row.no}}</td>
			<td>{{row.date}}</td>
			<td>{{row.quantity}}</td>
		</tr>
	</table>
	<tm-pagination conf="paginationConf"></tm-pagination>
	<br />
</body>
</html>